<template>
	<section>
		<!--
			:inline="true" 都显示在一行
			新增的工具条
		-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--抽屉-->
		<el-drawer title="字典明细" :visible.sync="drawShow" direction="rtl" size="50%">
			<!--新增的工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true">
					<el-form-item>
						<el-button type="primary" @click="innerAdd">新增</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<!--内层数据展示-->
			<el-table :data="DetailData">
				<el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
				<el-table-column property="name" label="名称"align="center" width="200"></el-table-column>
				<el-table-column label="操作" align="center">
					<template scope="scope">
						<el-button size="small" align="center" @click="innerEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" align="center" size="small" @click="innerDel(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!--工具条 分页查询-->
			<el-col :span="24" class="toolbar">
				<el-pagination layout="prev, pager, next"
							   @current-change="handleInnerCurrentChange"
							   :currentPage="innerCurrentPage"
							   :page-size="innerPageSize"
							   :total="innerTotal"
							   style="float:right;">
				</el-pagination>
			</el-col>
		</el-drawer>
		<!--内层新增/编辑的表单-->
		<el-dialog :title="innerTitle" :visible.sync="addInnerFormVisible">
			<!--数据校验
                :rules 校验的规则
                ref 相当于id 唯一标志
            -->
			<el-form :model="addInnerForm" label-width="80px" :rules="addInnerFormRules" ref="addInnerFormData">
				<el-form-item label="名称" prop="name">
					<el-input v-model="addInnerForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="typeId">
					<!--
                        v-model以及:都是双向绑定
                        clearable 下拉选择框能否清空
                        :label 下拉框显示的内容
                        :value 它得值，要与managerId值一致
                    -->
					<el-select v-model="addInnerForm.types_id" :disabled="bid"  clearable placeholder="请选择">
						<el-option
								v-for="item in type"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addInnerFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addInnerSubmit" >提交</el-button>
			</div>
		</el-dialog>
		<!--
			外层数据显示列表
			@row-dblclick	当某一行被双击时会触发该事件
		-->
		<el-table :data="dictionaryType" highlight-current-row border @row-dblclick="ShowInnerTable" style="width: 100%;" >
			<el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
			<el-table-column prop="name" label="名称" align="center"></el-table-column>
			<el-table-column prop="sn" label="简介" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条 分页查询-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next"
						   @current-change="handleCurrentChange"
						   :currentPage="currentPage"
						   :page-size="pageSize"
						   :total="total"
						   style="float:right;">
			</el-pagination>
		</el-col>
		<!--新增/编辑的表单-->
		<el-dialog :title="title" :visible.sync="addFormVisible">
			<!--数据校验
				:rules 校验的规则
				ref 相当于id 唯一标志
			-->
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addFormData">
				<el-form-item label="字典类型" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="简介" prop="sn">
					<el-input v-model="addForm.sn" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addSubmit" >提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	export default {
		name: 'dictionary',
		data () {
			return{
				bid:false,
				//查询到该行对应的类型
				type:[],
				//默认修改/编辑的表单不显示
				addInnerFormVisible:false,
				/*新增数据校验规则*/
				addInnerFormRules: {
					name: [
						{required: true, message: '请输入数据名称', trigger: 'blur'},
					],
					types_id: [
						{required: true, message: '请输入部门经理', trigger: 'change'},
					],
				},
				//新增的表单数据
				addInnerForm:{
					id:"",
					name:"",
					types_id:""
				},
				//新增和编辑列表名称
				innerTitle:"",
				/*总数*/
				innerTotal:0,
				/*当前页*/
				innerCurrentPage:1,
				/*每页显示条数*/
				innerPageSize:5,
				//后台根据名字查询相应的明细
				innerId:"",
				//字典明细
				DetailData:[],
				//默认不打开内层
				drawShow:false,
//========================================外层参数===============================================
				/*新增数据校验规则*/
				addFormRules: {
					name: [
						{required: true, message: '请输入数据字典类型', trigger: 'blur'},
					],
					sn: [
						{required: true, message: '请输入字典简介', trigger: 'blur'},
					],
				},
				//新增的列表
				addForm:{
					//用于修改
					id:"",
					//数据字典类型
					name:"",
					//简介
					sn:""
				},
				//模态框默认不显示
				addFormVisible:false,
				//新增或者修改的名称
				title:"",
				//查询数据字典列表
				dictionaryType:[],
				/*总数*/
				total:0,
				/*当前页*/
				currentPage:1,
				/*每页显示条数*/
				pageSize:5,
			}

		},
		methods:{
			//当双击表单数据的时候就显示内存抽屉
			ShowInnerTable(row){//传递该行的数据
				//将该行id传递到后台查询对应的明细
				this.innerId=row.id;
				//从第一页开始查询
				this.innerCurrentPage=1;
				this.getInnerData();
				//展示该行内层数据
				this.drawShow=true;

			},
			//根据相应品牌获取到内层数据
			getInnerData(){
				let param={"innerCurrentPage":this.innerCurrentPage,"innerPageSize":this.innerPageSize,"innerId":this.innerId}
				this.$http.patch("/detailData",param).then(res=>{
					let {count,list}=res.data;
					this.innerTotal=count;
					this.DetailData=list;
				});
			},
			//获取到外层的所有类型
			getTypes(){
				this.$http.patch("/dictionary/getTypes").then(res=>{
					this.type=res.data;
				})
			},
			//内层新增
			innerAdd(){
				this.innerTitle="新增";
				/*重置表单中数据  当有校验规则的时候才重置*/
				if(this.$refs["addInnerFormData"]!=null) {
					this.$refs["addInnerFormData"].resetFields();
				}
				//手动清空form表单 (因为点了编辑后，再重置 会重置到编辑的数据)
				for(var k in this.addInnerForm){
					this.addInnerForm[k] = "";
				}
				/*点击该行默认就是是该品牌*/
				this.addInnerForm["types_id"]=this.innerId;
				//禁用品牌选择，
				this.bid=true;
				this.addInnerFormVisible=true;
			},
			//内层编辑
			innerEdit(index,row){
				//启用下拉选择框
				this.bid=false;
				/*重置表单中数据  当有校验规则的时候才重置*/
				if(this.$refs["addInnerFormData"]!=null) {
					this.$refs["addInnerFormData"].resetFields();
				}
				//设置模态框标题
				this.title="修改";
				/*循环数据回显 普通的数据*/
				for(var k in this.addInnerForm){
					console.log(this.addInnerForm);
					/*将row中数据给表单对应的属性赋值   k是字符串，this.addFor["字段"]=值  这是赋值或者修改值*/
					this.addInnerForm[k] = row[k];
				}
				//显示出模态框
				this.addInnerFormVisible=true;
			},
			//修改或者编辑表单提交
			addInnerSubmit(){
				this.$refs["addInnerFormData"].validate((valid) => {
					//校验通过之后，执行if语句中的内容
					if (valid) {
						this.$http.post("/detailData", this.addInnerForm).then(res => {
							console.log(this.addInnerForm)
							let {success, msg} = res.data;
							if(success){
								//关闭模态框
								this.addInnerFormVisible = false;
								//如果成功发送操作信息
								this.$message({
									message: msg,
									type: 'success'
								});
								//刷新界面
								this.getInnerData();
							}else{
								this.$message.error(msg);
							}
						});
					}
				});
			},
			//内层删除
			innerDel(index,row){
				let id=row.id;
				this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {//点击确定执行该代码块代码，将改行的数据传入过去
					this.$http.delete("/detailData/"+id).then(res=>{//res接收到js传递数据
						//所有数据都是存在data中返回的，通过解构获取数据
						let {success,msg}= res.data;
						if(success){
							this.$message({
								type: 'success',
								message: msg
							});
							/*刷新页面*/
							this.innerCurrentPage=1;
							this.getInnerData();
						}else{
							this.$message({
								type: 'info',
								message: msg
							});
						}
					})
				}).catch(() => {});

			},
			//内层当页码发生变化出发此事件
			handleInnerCurrentChange(vals){
				this.currentPage=vals;
				this.getInnerData();
			},

//==================================================外层方法======================================
			//当页码发生变化出发此事件
			handleCurrentChange(vals){
				this.currentPage=vals;
				this.getDictionarys();
			},
			//字典新增
			handleAdd(){
				/*设置标题*/
				this.title="新增";
				/*重置表单中数据  当有校验规则的时候才重置*/
				if(this.$refs["addFormData"]!=null) {
					this.$refs["addFormData"].resetFields();
				}
				//手动清空form表单 (因为点了编辑后，再重置 会重置到编辑的数据)
				for(var k in this.addForm){
					this.addForm[k] = "";
				}
				/*弹出模态框*/
				this.addFormVisible = true;
			},
			//字典编辑
			handleEdit(index,row){
				/*重置表单中数据  当有校验规则的时候才重置*/
				if(this.$refs["addFormData"]!=null) {
					this.$refs["addFormData"].resetFields();
				}
				//设置模态框标题
				this.title="修改";
				/*循环数据回显 普通的数据*/
				for(var k in this.addForm){
					/*将row中数据给表单对应的属性赋值   k是字符串，this.addFor["字段"]=值  这是赋值或者修改值*/
					this.addForm[k] = row[k];
				}
				//显示出模态框
				this.addFormVisible=true;
			},
			//新增或者修改的确认按钮
			addSubmit(){
				//提交form表单之前必须要进行校验
				this.$refs["addFormData"].validate((valid) => {
					//校验通过之后，执行if语句中的内容
					if (valid) {
						this.$http.post("/dictionary",this.addForm).then(res => {
							let {success, msg} = res.data;
							if(success){
								//关闭模态框
								this.addFormVisible = false;
								//如果成功发送操作信息
								this.$message({
									message: msg,
									type: 'success'
								});
								//刷新界面
								this.getDictionarys();
							}else{
								this.$message.error(msg);
							}
						});
					}
				});
			},
			//字典删除
			handleDel(index,row){
				let id=row.id;
				this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {//点击确定执行该代码块代码，将改行的数据传入过去
					this.$http.delete("/dictionary/"+id).then(res=>{//res接收到js传递数据
						//所有数据都是存在data中返回的，通过解构获取数据
						let {success,msg}= res.data;
						if(success){
							this.$message({
								type: 'success',
								message: msg
							});
							/*刷新页面*/
							this.currentPage=1;
							this.getDictionarys();
						}else{
							this.$message({
								type: 'info',
								message: msg
							});
						}
					})
				}).catch(() => {});
			},
			/*获取字典明细数据*/
			getDictionarys(){
				let param={"currentPage":this.currentPage,"pageSize":this.pageSize}
				this.$http.patch("/dictionary",param).then(res=>{
					let {count,list}=res.data;
					this.total=count;
					this.dictionaryType=list;
				})
			}
		},
		mounted() {
			this.getDictionarys();
			this.getTypes();
		}
	}
</script>
